<template>
  <div>
    <p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p>
    <div style="text-align: center">
      <el-transfer
        style="text-align: left; display: inline-block"
        v-model="value"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :render-content="renderFunc"
        :titles="['Source', 'Target']"
        :button-texts="['到左边', '到右边']"
        :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
        @change="handleChange"
        :data="data">
        <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
        <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
      </el-transfer>
    </div>
    <p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定义数据项</p>
    <div style="text-align: center">
      <el-transfer
        style="text-align: left; display: inline-block"
        v-model="value4"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :titles="['Source', 'Target']"
        :button-texts="['到左边', '到右边']"
        :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
        @change="handleChange"
        :data="coopList">
        <span slot-scope="{ option }">{{ option.deptName }} - {{ option.label }}</span>
        <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
        <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
      </el-transfer>
    </div>
  </div>
</template>

<script>
import {listCoopUser} from "@/api/system/user";
import {listCooperate,delCooperate,addCooperate} from "@/api/system/cooperate";

export default {
  name: "coop",
  props:{
    project_id:null,
  },
  created() {
    this.getcoopUser();
  },
  data() {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        });
      }
      return data;
    };
    return {
      data: generateData(),
      coopList:[],  //所有的非档案馆的用户列表
      value: [1],
      value4: [],
      otherUser:[], //所有的与当前项目相关的用户列表
      renderFunc(h, option) {
        return <span>{option.key} - {option.label}</span>;
      },
      queryParams: {
        projectId:null,
      },
    };
  },

  methods: {
    getcoopUser(){
      this.queryParams.projectId=this.project_id;
      console.log(this.queryParams.projectId);
      listCooperate(this.queryParams).then(response=>{
        console.log(response);
        this.otherUser=response.rows;
      })
      listCoopUser().then(response=>{
        console.log(response);
        for (let i=0;i<response.total;i++) {
          let coopId=null;
          for(let j=0;j<this.otherUser.length;j++){//通过循环来找到所有用户中包含的协作用户
            if(response.rows[i].userId===this.otherUser[j].unitId){
              this.value4.push(i);
              coopId=this.otherUser[j].id;
              break;
            }
          }
          this.coopList.push({
            key:i,
            deptName:response.rows[i].dept.deptName,
            label: response.rows[i].userName,
            userid:response.rows[i].userId,
            coopId:coopId,
          })
        }
      })
    },
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
      if(direction==="left"){
        for (let movedKey in movedKeys) {
          delCooperate(this.coopList[movedKey].coopId);
        }
      }else{
        for (let movedKey in movedKeys) {
          addCooperate({
            projectId:this.project_id,
            unitId:this.coopList[movedKey].userid,
          })
        }
      }
    },
  }
}
</script>

<style lang="scss">
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}

.el-transfer-panel{
  height: 450px;
}
.el-transfer-panel__list.is-filterable {
  height: 303px; /* 穿梭框列表高度 */
}

</style>

